<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录 | 机械配件商城</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="./element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="components/min-width-container.css" />
	<link rel="stylesheet" type="text/css" href="components/header-simple.css">
	<link rel="stylesheet" type="text/css" href="components/footer-bottom.css">
	<link rel="stylesheet" type="text/css" href="components/footer-image.css">
	<style>
		.app-content{
			padding-left: 188px;
			padding-top: 50px;
			padding-bottom: 100px;
		}
		
		.app-content-form{
			width: 360px;
		}
		
		.app-content-form-item{
			display: flex;
			align-items: center;
			height: 64px;
		}
		
		.app-content-form-item > div:first-child{
			
		}
		
		.app-content-form-item > div:last-child{
			flex-grow: 1;
		}
	</style>
</head>
<body>
    <div id="app">
		<header-simple></header-simple>
		<min-width-container>
			<div class="app-content">
				<div class="app-content-title">
					<h3>一个账号，玩转商城所有的服务！</h1>
					<h6 class="text-general-1 m-t-4">购机械，购二手设备，购配件，购模型，服务保修</h6>
				</div>
				<div class="app-content-form m-t-20">
					<div class="app-content-form-item">
						<div class="m-r-8"><i class="el-icon-s-custom text-important-very text-1"></i></div>
						<div><el-input v-model="account" placeholder="用户名/已验证的手机号码"></el-input></div>
					</div>
					<div class="app-content-form-item">
						<div class="m-r-8"><i class="el-icon-key text-important-very text-1"></i></div>
						<div><el-input v-model="password" placeholder="密码" show-password></el-input></div>
					</div>
					<div class="app-content-form-item">
						<div><el-checkbox v-model="remember">记住密码</el-checkbox></div>
						<div class="right">
							<el-button type="text" @click="window.location.href='/password-forget1.html'">忘记密码</el-button>
							<el-button type="text" @click="window.location.href='/register.html'">免费注册</el-button>
						</div>
					</div>
					<div>
						<el-button type="primary" size="small" style="width: 100%;" @click="login">登录</el-button>
					</div>
				</div>
			</div>
		</min-width-container>
		<footer-image></footer-image>
		<footer-bottom></footer-bottom>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./element-ui/index.js"></script>
	<script src="components/min-width-container.js"></script>
	<script src="components/header-simple.js"></script>
	<script src="components/footer-bottom.js"></script>
	<script src="components/footer-image.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data(){
				return {
					account: "",
					password: "",
					remember: false
				};
            },
            created(){
            	const user = JSON.parse(localStorage.getItem("user"));
            	if(user){
            		this.account = user.account;
            		this.password = user.password;
            	}
            },
            methods: {
                login(){
                	if(this.account === "" || this.password === ""){
                		this.$message.error('请输入完整的通行账号和密码');
                	}else{
						const params = new URLSearchParams();
						params.append('account', this.account);
						params.append('password', this.password);
                		axios.post("/user/do_login.do", params)
                		.then(response=>{
                			const data = response.data;
                			if(this.remember){
								const user = {
									account: this.account,
									password: this.password
								};
								localStorage.setItem("user", JSON.stringify(user));
							}else{
								localStorage.removeItem("user");
							}
                			if(data.status === 0){
                				if(data.data.role === 1){
									window.location.href = "/admin/commodity.html";
                				}else{
									this.$message({
										message: "登录成功",
										type: "success"
									});


                					setTimeout(()=>{
                						window.location.href = "/order.html";
                					}, 2000);
                				}
                				//保存登录信息
								sessionStorage.setItem("user", JSON.stringify(data.data));
                			}else{
								this.$message(data.msg);
                			}
                		}).catch(err=>{
                			this.$message.error('发送请求失败');
                		})
                	}
                }
            }
        });
    </script>
</body>
</html>